<template>
	<div>
		<el-table :data="tableData" style="width: 100%"
		class="person-rec-contract-history-table">
			<el-table-column type="expand">
				<template #default="props">
					<div class="p-20px bg-#F6F6F6">
						<div class="text-12px text-#000000">
							<div class="flex items-center">
								<p class="mr-10px">订单号：{{ props.row.orderId }}</p>
								<img src="/transaction/spot/copy.svg" class="w-16px h-16px mr-20px">
								<p class="mr-20px">更新时间：{{ props.row.updateTime }}</p>
								<p>成交额：{{ props.row.sumTrade }}</p>
							</div>
							<div class="mt-10px flex items-center">
								<p class="mr-20px">总盈亏：{{ props.row.profit }}</p>
								<p>总手续费：{{ props.row.commission }}</p>
							</div>
							<div class="mt-10px">
								<el-table :data="props.row.list" style="width: 100%" class="person-rec-contract-history-table-expand-table">
									<el-table-column prop="time" label="时间">
										<template #default="scope">
											<div class="pt-10px pb-10px">{{ scope.row.time }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="tradePrice" label="交易价格" />
									<el-table-column prop="tradeSum" label="成交数量" />
									<el-table-column prop="commission" label="手续费" />
									<el-table-column prop="role" label="角色" />
									<el-table-column prop="profit" label="收益" />
									<el-table-column prop="volume" label="成交额" />
								</el-table>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="time" label="时间">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<span class="text-[#000000] text-[14px] font-[400]">{{ scope.row.time }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="coin" label="合约">
				<template #default="scope">
					<div class="pt-10px pb-10px">
						<p class="text-[#000000] text-[14px] font-[300] mb-4px">{{ scope.row.coin }}</p>
						<p class="text-#114CEE text-12px bg-#E9F2FF rounded-4px w-36px text-center box-border">
							{{ scope.row.contract }}
						</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="methods" label="类型">
			</el-table-column>
			<el-table-column prop="to" label="方向">

				<template #default="scope">
					<div class="pt-10px pb-10px" :class="{ 'text-#07B175': scope.row.to, 'text-#F34E5F': !scope.row.to }">
						{{ (scope.row.to ? '开多' : '开空') }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="avgPrice" label="平均价格">
			</el-table-column>
			<el-table-column prop="price" label="价格">
				<template #default="scope">
					<div>
						<div v-if="scope.row.price" class="text-12px">
							<p>{{ scope.row.price }}</p>
							<p class="text-#B5B5B5 mt-2px">破产价格</p>
						</div>
						<div v-else>
							--
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="sumTrade" label="成交数量">
			</el-table-column>
			<el-table-column prop="sum" label="数量">
			</el-table-column>
			<el-table-column prop="triggerPrice" label="触发条件">
				<template #default="scope">
					<div>
						<div v-if="scope.row.triggerMethods">
							<p>{{ scope.row.triggerMethods }}</p>
							<p>{{ scope.row.triggerPrice }}</p>
						</div>
						<div v-else>
							<p>--/--</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref<any[]>([
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '市价委托',
		to: false,
		avgPrice: '0.0054660',
		price: '',
		sumTrade: '5.384010 USDT',
		sum: '0.00 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00',
		status: '完全成交',
		orderId: '25256256253',
		updateTime: '2024-11-20 12:00:00',
		profit: '0.11229000 USDT',
		commission: '0.00269200 USDT',
		list: [
			{
				time: '2024-11-20 12:00:00',
				tradePrice: '0.0054660',
				tradeSum: '5.384010 USDT',
				commission: '0.00269200 USDT',
				role: '吃单方',
				profit: '0.11229000 USDT',
				volume: '5.38401000 USDT'
			},
			{
				time: '2024-11-20 12:00:00',
				tradePrice: '0.0054660',
				tradeSum: '5.384010 USDT',
				commission: '0.00269200 USDT',
				role: '吃单方',
				profit: '0.11229000 USDT',
				volume: '5.38401000 USDT'
			}
		]
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '市价委托',
		to: true,
		avgPrice: '0.0054660',
		price: '0.005466',
		sumTrade: '5.384010 USDT',
		sum: '0.00 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00',
		status: '完全成交',
		orderId: '25256256253',
		updateTime: '2024-11-20 12:00:00',
		profit: '0.11229000 USDT',
		commission: '0.00269200 USDT',
		list: [
			{
				time: '2024-11-20 12:00:00',
				tradePrice: '0.0054660',
				tradeSum: '5.384010 USDT',
				commission: '0.00269200 USDT',
				role: '吃单方',
				profit: '0.11229000 USDT',
				volume: '5.38401000 USDT'
			},
			{
				time: '2024-11-20 12:00:00',
				tradePrice: '0.0054660',
				tradeSum: '5.384010 USDT',
				commission: '0.00269200 USDT',
				role: '吃单方',
				profit: '0.11229000 USDT',
				volume: '5.38401000 USDT'
			}
		]
	}
])

</script>

<style lang="scss" scoped>
.person-rec-contract-history-table {
	// --el-table-border-color:none;
	::v-deep .el-table__cell {
		padding: 0;
	}
}
.person-rec-contract-history-table-expand-table{
	font-size: 12px;
	--el-table-bg-color: #00000000;
	--el-table-tr-bg-color:#00000000;
	--el-table-header-bg-color:#00000000;
}
</style>
